<template>
	<view class="page business-number-back">
		<nav-header title="收回工作号" :show-right="false">
		</nav-header>

		<view class="number-none" v-if="false">
			<svg-icon icon="none" :width="230"></svg-icon>
			<text>暂无工作号可回收</text>
		</view>
		<view v-else>
			<view class="getNumber">
				<text>工作号 ：</text>
				<uni-data-select v-model="value" :localdata="workNumber" @change="change"
					style="width: 500rpx;"></uni-data-select>
			</view>

			<view class="tip">
				<text class="text-xs-Regular">*收回后员工将自动退出企业，系统将会发送站内信提醒用户。收回后该工作号所有聊天记录都会保存在云端，待分配后将会还原到新员工的工作号上。</text>
			</view>

			<!-- <view class="button">
				<button @click="submit">确认</button>
			</view> -->
			
			<tabbar-button-group text="确认回收" @click="submit"></tabbar-button-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				userId: null,
				companyId: null,
				workNumber: [],
			}
		},
		methods: {
			submit() {
				const companyId = this.companyId
				const userId = this.userId
				this.$http({
					url: `/job/delete/${companyId}/${userId}`,
					method: 'DELETE',
				}).then(res => {
					uni.showToast({
						title: '收回工作号成功',
						icon: 'success',
						duration: 1000 // 设置显示时长为 3000 毫秒
					});


					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000); // 3000 毫秒即 3 秒后执行返回上一页操作
				});
			},
			change(e) {
				this.userId = e;

			},
			_getData(companyId) {
				// 获取公司下的工作号
				// 0 没有使用 1 正在使用 后期优化
				this.$http({
					url: `/job/1/${companyId}/list`,
					method: 'GET'
				}).then(res => {
					console.log("工作号列表", res)
					this.workNumber = res.map(employee => {
						return {
							text: employee.id,
							value: employee.userId,
						}
					})
				});
			},
		},

		onLoad(options) {
			this.companyId = parseInt(options.companyId)
			this._getData(this.companyId)
		}
	}
</script>

<style lang="scss" scoped>
	.business-number-back {
		width: 100vw;
		height: 90vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 30rpx;

		.number-none {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #aaa;
			font-size: 30rpx;
			margin-bottom: 180rpx;
		}

		.getNumber {
			padding: 24rpx 32rpx;
			display: flex;
			align-items: center;

			text {
				width: 160rpx;
			}
		}

		.tip {
			padding: 10rpx 24rpx;
			font-size: 26rpx;
			color: $warning-500;
		}

		.button {
			width: 100%;
			padding-bottom: 30rpx;
			position: fixed;
			bottom: 20rpx;
			left: 0;

			button {
				margin-top: 20rpx;
				font-size: 28rpx;
				background-color: #007aff;
				color: #fff;
				width: 90%;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>